import { mount } from '../common/mount';
import type VNode from '../common/VNode';
import { patchListChildren } from './patchListChildren';

/**
 * 判断两个 VNode 是否为同一节点（key 和 tag 都相同）
 * @param {VNode} n1 旧 VNode
 * @param {VNode} n2 新 VNode
 * @returns {boolean} 是否相同
 */
function isSameVNode(n1: VNode, n2: VNode) {
  return n1.key === n2.key && n1.tag === n2.tag;
}

/**
 * 对比子节点, 更新真实DOM
 * @param newEL 新节点的真实 DOM
 * @param oldChildren 旧节点的子节点
 * @param newChildren 新节点的子节点
 */
export const patchChildren = (newEL: HTMLElement, oldChildren: VNode[], newChildren: VNode[]) => {
  // 文本 --> 列表
  if (
    oldChildren?.some((child) => child.text !== null) &&
    newChildren?.every((child) => child.text === null)
  ) {
    newEL.innerHTML = '';
    newChildren.forEach((child) => mount(child, newEL));
    return;
  }
  // 列表 --> 文本
  if (
    oldChildren.every((child) => child.text === null) &&
    newChildren.some((child) => child.text !== null)
  ) {
    newEL.innerHTML = '';
    const txtNode = document.createTextNode(newChildren[0]?.text || '');
    newEL.appendChild(txtNode);
    return;
  }

  // core: 对比列表
  if (
    oldChildren.every((child) => child.text === null) &&
    newChildren.every((child) => child.text === null)
  ) {
    // 两个都是列表，调用双端对比算法
    patchListChildren(newEL, oldChildren, newChildren);
  }
};
